<div class="yl-content">
  <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">

    <div class="mb-4">
            <div style="margin-bottom: 20px;" class="gycl">
                <h5 class="mb-4"><i class="fa fa-table"></i> 工艺规程材料信息</h5>
                <p-table [value]="materials" [lazy]="true" (onLazyLoad)="getgy($event)" [paginator]="true" [rows]="10" [scrollable]="true"
                scrollHeight="200px">
                        <ng-template pTemplate="header">
                            <tr>
                                <th style="width:13%;text-align:center;">种类</th>
                                <th style="width:25%; text-align:center;">尺寸</th>
                                <th style="width:13%; text-align:center;">大小</th>
                                <th style="width:13%; text-align:center;">数量</th>
                                <th style="width:18%; text-align:center;">
                                    状态
                                </th>
                                <th style="width:18%; text-align:center;">
                                    牌号
                                </th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-rowData>
                            <tr>
                                <td style="text-align:center;">
                                    {{ rowData.grade }}
                                </td>
                                <td style="text-align:center;">{{ rowData.spec }}</td>
                                <td style="text-align:center;">{{ rowData.size }}</td>
                                <td style="text-align:center;">
                                    {{ rowData.number }}
                                </td>
                                <td style="text-align:center;">
                                    {{ rowData.materialStatus}}
                                </td>
                                <td style="text-align:center;">{{ rowData.paiHao }}</td>
                            </tr>
                        </ng-template>
                    </p-table>
            </div>
        <div style="margin-bottom: 20px;" class="gycl">
            <h5 class="mb-4"><i class="fa fa-table"></i> 库存材料信息</h5>
            <p-table
                #dataTable
                (onLazyLoad)="getCharges($event)"
                [value]="charges"
                rows="10"
                [paginator]="false"
                [lazy]="true"
                dataKey="id"
                [scrollable]="true"
                ScrollWidth="100%"
                [responsive]="primengTableHelper.isResponsive"
                [resizableColumns]="primengTableHelper.resizableColumns"
                [scrollable]="true"
                scrollHeight="200px"
            >
                <ng-template pTemplate="caption">
                    <div class="row align-items-center m--margin-bottom-10">
                        <div class="col-xl-4" style="text-align:left">
                            <p-multiSelect
                                [options]="cols"
                                [(ngModel)]="selectedColumns"
                                optionLabel="header"
                                selectedItemsLabel="已选择 {0} 列"
                                [style]="{ padding: 0 }"
                                defaultLabel="Choose Columns"
                            ></p-multiSelect>
                        </div>
                        <div class="col-xl-8">
                            <div
                                class="form-group m-form__group align-items-center mb-0"
                            >
                                <div class="input-group">
                                    <input
                                        class="form-control m-input"
                                        autoFocus
                                        type="text"
                                        placeholder="搜索..."
                                        (keyup)="getCharges($event)"
                                        [(ngModel)]="filterText"
                                        style="width:auto"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </ng-template>
                <ng-template pTemplate="header">
                    <tr>
                        <th width="80px">
                            库存总量
                        </th>
                        <th
                            *ngFor="let col of selectedColumns"
                            width="{{ col.width }}"
                        >
                            {{ col.header }}
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record let-expanded="expanded">
                    <tr>

                        <th width="80px">
                            {{ record.materialForProduct.itemAmount }}
                        </th>
                        <td
                            *ngFor="let col of selectedColumns"
                            width="{{ col.width }}"
                        >
                            {{ record.materialForProduct[col.field] }}
                        </td>
                    </tr>
                </ng-template>
            </p-table>
            <div
                class="primeng-no-data"
                *ngIf="primengTableHelper.totalRecordsCount == 0"
            >
                没有找到适合的材料
            </div>
            <div class="primeng-paging-container">
                <p-paginator
                    rows="5"
                    #paginator
                    (onPageChange)="getCharges($event)"
                    [totalRecords]="primengTableHelper.totalRecordsCount"
                    [rowsPerPageOptions]="
                        primengTableHelper.predefinedRecordsCountPerPage
                    "
                >
                </p-paginator>
                <span class="total-records-count">
                    总计：{{ primengTableHelper.totalRecordsCount }}
                </span>
            </div>
        </div>
        <div>
            <h5 class="mb-4"> <i class="fa fa-list"></i> 预定信息</h5>
            <p-table [value]="outs" [paginator]="true" [rows]="10" [scrollable]="true"
            scrollHeight="200px">
                <ng-template pTemplate="caption">
                    材料预定
                </ng-template>
                <ng-template pTemplate="header">
                    <tr style="border-left:1px solid #c8c8c8;border-right:1px solid #c8c8c8;">
                        <th style="width:2em"></th>
                        <th>材料合格证号</th>
                        <th>数量</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData>
                    <tr style="border-left:1px solid #c8c8c8;border-right:1px solid #c8c8c8;">
                        <td style="height: 36px;width:2em"></td>
                        <td pEditableColumn>
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <input id="input" type="text" size="30" pInputText [(ngModel)]="rowData.materialId">
                                </ng-template>
                                <ng-template pTemplate="output">
                                    {{rowData.materialId}}
                                </ng-template>
                            </p-cellEditor>
                        </td>
                        <td pEditableColumn>
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <p-spinner size="30" [(ngModel)]="rowData.itemAmount" [min]="0" [max]="100"></p-spinner>
                                </ng-template>
                                <ng-template pTemplate="output">
                                    {{rowData.itemAmount}}
                                </ng-template>
                            </p-cellEditor>
                        </td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="summary" let-rowData>
                    <div style="text-align:left">
                        <button type="button" pButton (click)="showDialogToAdd()" label="新增"></button>
                    </div>
                </ng-template>
            </p-table>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" pButton icon="fa fa-plus" (click)="save()" label="预定"></button>
      </div>

  </div>
</div>
